<template>
  <view class="route">
    <view class="banner">
      <image
        class="img"
        mode="aspectFill"
        src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/travelImg.png"
      >
        <view class="yy" />
      </image>
    </view>
    <view class="card">
      <view class="top">
        <view
          class="cityName"
          @click="startCityShow=true"
        >
          <image
            :src="require('@/static/public/position.png')"
            class="position"
          />
          {{ form.startCity || '出发地' }}
        </view>
        <image
          :src="require('@/static/public/back.png')"
          class="back"
        />
        <view
          class="cityName"
          @click="endCityShow=true"
        >
          {{ form.endCity }}
        </view>
      </view>
      <view class="center">
        <view class="inputbox">
          <input
            v-model="form.days"
            class="input"
            type="number"
            :maxlength="2"
            placeholder="填写天数"
            @input="inputDay"
          >
          <view
            v-if="form.days"
            class="input input-suffix"
          >
            天
          </view>
        </view>
        <!-- <view
          class="picker"
          @click="datePicker"
        >
          {{ form.date }}
        </view> -->
        <view class="inputbox">
          <input
            class="input"
            type="number"
            placeholder="人均预算"
            @input="inputPrice"
          >
          <view
            v-if="form.price"
            class="input input-suffix"
          >
            元
          </view>
        </view>
      </view>
      <view
        class="btn"
        @click="search"
      >
        <image
          :src="require('@/static/public/searchBtn.png')"
          mode="aspectFit"
          class="btnImg"
        />
        <view class="btnFont">
          搜索
        </view>
      </view>
      <view class="tips">
        <view class="tipsExt" />
        臻选线路·服务安心·出行安心
        <view class="tipsExt" />
      </view>
    </view>
    <view class="label">
      <my-banner
        :img-list="imgList"
        @click="clickImg"
      />
    </view>
    <p class="title">
      热门目的地
    </p>
    <view class="contain">
      <view class="menuList">
        <view
          v-for="(item,index) in menuList"
          :key="index"
          class="item"
          @click="$jumpUrl(`/productPages/route/list?endCity=${item.areaName}&cateId=${cateId}`)"
        >
          <image
            :src="item.areaImage"
            class="img"
            mode="aspectFill"
          />
          <view :class="['text', `text-${index}`]">
            {{ item.areaName }}
          </view>
        </view>
      </view>
    </view>
    <view class="recommend">
      <my-tablist
        :category-list="categoryList"
        @change="changeTab"
      />
      <view class="waterfall">
        <my-waterfall
          :list="list"
          path="/productPages/route/detail"
        />
        <view
          v-if="!list.length"
          class="none"
        >
          努力装修中，敬请期待
        </view>
      </view>
    </view>
    <popup-layer
      ref="popupRef"
      :direction="'left'"
      :show-pop="startCityShow"
    >
      <city-menu
        :city-name.sync="form.startCity"
        :can-storge="false"
        @citySearch="cityClose"
        @cityClose="cityClose"
      />
    </popup-layer>
    <popup-layer
      ref="popupRef"
      :direction="'left'"
      :show-pop="endCityShow"
    >
      <city-menu
        :city-name.sync="form.endCity"
        @citySearch="endCityClose"
        @cityClose="endCityClose"
      />
    </popup-layer>
  </view>
</template>


<script>
	import cityMenu from '@/components/cityMenu/index.vue';
	import popupLayer from 'components/popup-layer/popup-layer.vue';
	import myWaterfall from '@/components/my-waterfall/index.vue';
	import myTablist from '@/components/my-tablist/index.vue';
	import myBanner from '@/components/my-banner/index.vue';
	import moment from 'dayjs';
	export default {
		components: {
			popupLayer,
			cityMenu,
			myWaterfall,
			myTablist,
			myBanner
		},
		data() {
			return {
				startCityShow: false,
				endCityShow: false,
				form: {
					startCity: '',
					endCity: '目的地',
					date: '2021-06-20',
					startDate: '2021-06-19',
					price: '',
					days: ''
				},
				page: {
					page_size: 10,
					current_page: 1,
					count: 0,
					loading: false,
					finished: false
				},
				menuList: [],
				list: [],
				first: true,
				categoryList: [],
        codeList: '', // 过滤的分类组
        defaultCode: '', // 保存首页ico跳转传过来的分类组
        cateId: '',
        pageTitle: '',
        imgList: [
        //   {
        //     url: 'https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/banner/huangshan.png',
        //     id: '327',
        //     type: 'route'
        //   },
        //   {
        //     url: 'https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/banner/haitangwan340.png',
        //     id: '340',
        //     type: 'route'
        //   },
        //   {
        //     url: 'https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/banner/lishuixiaozhong.png',
        //     id: '266',
        //     type: 'route'
        //   },
        ]
			};
		},
		onReachBottom() {
			if (this.list.length && this.list.length < this.page.count) {
				console.log('onreachbottom');
				this.queryData();
			}
		},
		onLoad(e) {
			if (e.category) {
				this.codeList = e.category;
				this.defaultCode = e.category;
			}
			if (e.cateId) {
				this.cateId = e.cateId;
				this.getCategoryList(e.cateId);
			}
			if (e.title) {
				this.pageTitle = e.title;
				uni.setNavigationBarTitle({
					title: e.title
				});
			}
			this.queryData();
			this.getUserLocation();
			this.getHotArealList();
			this.getBanerList();
		},
		onShow() {
			this.$store.commit('changeSearchForm', {}); // 清除搜索参数
		},
		// onShow() {
		// 	if (!this.first) {
		// 		this.list = [];
		// 		this.page.current_page = 1;
		// 		console.log('onshow')
		// 		this.queryData();
		// 	}
		// 	this.first = false
		// },
		onPullDownRefresh() {
			this.list = [];
			this.page.current_page = 1;
			this.queryData('refresh');
			this.getHotArealList();
		},
		methods: {
			cityClose() {
				this.startCityShow = false;
			},
			endCityClose() {
				this.endCityShow = false;
			},
			bindDateChange(e) {
				this.form.date = e.detail.value;
			},
			datePicker() {
				my.datePicker({
					format: 'yyyy-MM-dd',
					currentDate: moment().format('YYYY-MM-DD'),
					startDate: moment().format('YYYY-MM-DD'),
					success: (res) => {
						this.form.date = res.date;
					}
				});

			},
			inputDay(e) {
        let num = Number(e.detail.value)
        num = Math.ceil(num)
				console.log('天数', e);
        if(num>30){
          num = 30
        }
        this.$nextTick(()=>{
          this.form.days = num
        })
			},
			inputPrice(e) {
				console.log('价格', e);
				this.form.price = e.detail.value;
			},
			// 列表获取
			queryData(status) {
				uni.showLoading({
					title: '加载中'
				});
				this.page.loading = true;
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/goods/search',
					data: {
						type: 'ROUTE',
						hot: 'Y',
						// codeList: this.codeList.length ? JSON.stringify(this.codeList) : '',
						codeList: this.codeList,
						...this.page
					}
				}).then(res => {
					res.data.forEach((t) => {
						t.tagList = t.tag ? JSON.parse(t.tag) : [];
						if (t.price && t.price > 10000) {
							t.price = (t.price / 1000).toString().slice(0, 4) + '万+';
						}
						if (t.sellNumber && t.sellNumber > 10000) {
							t.sellNumber = (t.sellNumber / 1000).toString().slice(0, 4) + '万+';
						}
					});
					if (res.data.length) {
						if (this.page.current_page === 1) {
							res.data.splice(1, 0, {
								isCustomize: true
							});
						}
						this.list.push.apply(this.list, res.data);
					}
					this.page.count = res.count;
					// this.page.loading = false;
					if (this.list.length >= this.page.count) {
						this.page.finished = true;
					}
					this.page.current_page += 1;
					if (status === 'refresh') {
						uni.stopPullDownRefresh();
					}
				}).finally(err => {
					this.page.loading = false;
					uni.hideLoading();
				});
			},
			search() {
				const {
					startCity,
					endCity,
					days,
					price
				} = this.form;
				if (!startCity) return uni.showToast({
					title: '请选择目的地'
				});
				this.$jumpUrl(
					`/productPages/route/list?startCity=${startCity}&endCity=${endCity}&days=${days}&price=${price}&cateId=${this.cateId}&title=${this.pageTitle}`
					);
			},
			getUserLocation() {
				// 获取定位
				dd.getLocation({
					type: 1,
					success: (res) => {
						console.log('定位成功', res);
						const {
							city
						} = res;
						this.form.startCity = city;
						// this.$store.commit('changeLocalName', city) // 出发日期不作为
					},
					fail(e) {
						uni.showToast({
							title: '定位失败，请尝试开启定位权限'
						});
					}
				});
			},
			changeTab(item) {
				console.log('changeTab', item);
				this.list = [];
				this.page.current_page = 1;
				if (item.code) {
					this.codeList = item.code;
				} else {
					this.codeList = this.defaultCode;
				}
				this.queryData();
			},
			getHotArealList() {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/hotArea/queryAllList'
				}).then(res => {
					if (res.data) {
						this.menuList = res.data;
					}
				});
			},
			getCategoryList(id) {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/product/ioc/queryCategoryListById',
					data: {
						id
					}
				}).then(res => {
					if (res.data) {
						this.categoryList = res.data;
					}
				});
			},
			clickImg(item) {
				console.log('clickImg', item);
				if (item.type === 'BUILD') {
					this.$jumpUrl(`/productPages/team/productDetail?id=${item.productId}`);
				} else if (item.type === 'ROUTE') {
					this.$jumpUrl(`/productPages/route/detail?id=${item.productId}`);
				}
			},
			// 获取banner列表
			getBanerList(){
				this.$ajax({
							method: 'get',
							url: '/outing/mobile/banner/queryAllList'
						}).then(res => {
							console.log(res);
							if(res.data) {
								res.data.map(item=>{
									if(item.popLocation=='2'){
										item.url=item.imgUrl;
										this.imgList.push(item);
									}
								});
							}
						});
			}
		}
	};
</script>

<style lang="less" scoped>
	.route {
		min-height: 100vh;
		overflow: hidden;
		background: #F7F9FB;

		.recommend {
			margin-left: 30upx;

			.tabList {
				display: flex;
				align-items: flex-end;
				margin: 40rpx 20rpx 20rpx 0;
				padding: 0 20rpx;
				padding-bottom: 10rpx;
				overflow-x: scroll;
				white-space: nowrap;

				.tab {
					margin-right: 30upx;
					position: relative;

					.item {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
					}

					.active {
						font-size: 40rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 56rpx;
					}

					.tabBottom {
						position: absolute;
						width: 108rpx;
						height: 20rpx;
						bottom: -5rpx;
						left: 50%;
						transform: translate(-50%);
					}
				}
			}

			.none {
				padding: 100upx 30upx;
				text-align: center;
			}

			.waterfall {
				height: 100vh;
			}
		}

		.title {
			font-size: 34upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 40upx 0 20upx 0;
			line-height: 48upx;
			margin-left: 30upx;
		}

		.contain {
			height: 300upx;
			overflow: hidden;
		}

		.menuList {
			margin: 0 0 0 30upx;
			width: 720upx;
			height: 300upx;
			// overflow-x: scroll;
			// white-space: nowrap;

			/deep/uni-swiper-item {
				width: 112px !important;
			}

			.swiper-item {
				width: 112px !important;
				position: absolute;
			}

			.item {
				border-radius: 15upx;
				display: inline-block;
				width: 165rpx;
				height: 136rpx;
				flex-shrink: 0;
				overflow: hidden;
				position: relative;
				margin-right: 10upx;
				margin-bottom: 20upx;

				.img {
					width: inherit;
					height: inherit;
				}

				.text {
					width: inherit;
					height: 41rpx;
					border-radius: 0 0 10rpx 10rpx;
					backdrop-filter: blur(10px);
					position: absolute;
					left: 0;
					bottom: -1rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;

					h1 {
						margin: 14upx 0 10upx 0;
					}
				}

				.text-0 {
					background: rgba(1, 203, 203, 0.4);
				}

				.text-1 {
					background: rgba(172, 36, 113, 0.4);
				}

				.text-2 {
					background: rgba(215, 102, 8, 0.4);
				}

				.text-3 {
					background: rgba(1, 203, 203, 0.4);
				}

				.text-4 {
					background: rgba(138, 108, 202, 0.4);
				}

				.text-5 {
					background: rgba(165, 189, 88, 0.4);
				}

				.text-6 {
					background: rgba(198, 55, 24, 0.4);
				}

				.text-7 {
					background: rgba(0, 141, 204, 0.4);
				}
			}
		}

		.banner {
			position: relative;
			margin-bottom: -230rpx;

			.img {
				width: 750upx;
				height: 400upx;
			}

			.yy {
				width: 100%;
				height: 260upx;
				position: absolute;
				left: 0;
				bottom: -50upx;
				background-image: linear-gradient(180deg,
						rgba(245, 245, 245, 0) 0%,
						rgba(245, 245, 245, 1) 100%);
				z-index: 1;
			}
		}

		.label {
			// background: #010200;
			border-radius: 20rpx;
			margin: 40rpx 20rpx;
			overflow: hidden;

			.img {
				width: 710rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
		}

		.card {
			width: 710upx;
			box-sizing: border-box;
			padding: 50rpx 40rpx 20rpx;
			background: #FFF;
			position: relative;
			margin: 0px auto;
			z-index: 99;
			box-shadow: 0px 6upx 14upx 1upx rgba(53, 56, 77, 0.1);
			border-radius: 20rpx;

			.btn {
				width: 630rpx;
				height: 118rpx;
				color: #333333;
				font-size: 32upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				text-align: center;
				line-height: 45upx;
				margin-bottom: 19rpx;
				position: relative;

				.btnImg {
					width: inherit;
					height: inherit;
				}

				.btnFont {
					position: absolute;
					left: 50%;
					bottom: 0.19rem;
					transform: translate(-50%);
				}
			}

			.top {
				display: flex;
				justify-content: space-around;

				.cityName {
					border-bottom: 1px #00000014 solid;
					font-size: 36upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					padding-bottom: 18upx;
					// width: 720upx;
					width: 280upx;
					text-align: center;
					line-height: 50upx;
					// border-right: 1px solid #ccc;
				}

				.position {
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}

				.placeholder {
					color: #ccc;
				}

				// /deep/.placeholder {
				// 	font-size: 30upx;
				// 	font-family: PingFangSC-Semibold, PingFang SC;
				// 	font-weight: 600;
				// 	color: #333333;
				// 	text-align: center;
				// }

				.right {
					text-align: right;
				}

				.back {
					width: 44upx;
					height: 44upx;
				}
			}

			.input {
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
				text-align: center;
			}

			.inputbox {
				position: relative;
			}

			.input-suffix {
				position: absolute;
				top: 50%;
				right: 0.2rem;
				transform: translate(0, -50%);
			}

			.uni-input-placeholder {
				color: #999;
			}

			.center {
				height: 90upx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px #00000014 solid;
				margin-bottom: 14rpx;

				.picker {
					width: 280upx;
					overflow: hidden;
				}
			}

			.tips {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				.tipsExt {
					width: 80rpx;
					height: 1rpx;
					border: 1rpx solid #00000014;
					margin: 0 20rpx;
				}
			}
		}
	}
</style>
